<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>钱包: {{ money }}</h4>
    <h4>车子: {{ car }}</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref, reactive, provide } from 'vue'

let money = ref(1000)
let car = reactive({ brand: '宝马', price: 100 })

function updateMoney(value: number) {
  money.value -= value
}
// 向所有后代提供数据
provide('moneyContext', { money, updateMoney })
provide('car', car)
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>